<template>
<!-- 我的足迹 -->
    <div class="Myfoot">
        <Hand title="我的足迹" :left="true" :iconbool="false" @back="fn"></Hand>
        <div class="foot">
            <div v-for="item, index in arr " :key="index">
                <p>{{ item.time }}</p>
                <ul>
                    <li v-for="item1 in item.img">
                        <img :src="item1" alt="">
                        <span class="icon" @click="del(item.time,item1)" >
                            <span class="iconfont">&#xe74b;</span>
                        </span>
                        <!-- <p>{{item11}}</p> -->
                    </li>
                </ul>
            </div>
        </div>


    </div>

</template>

<script setup>
import { ref } from 'vue';
import Hand from '../../components/Hand.vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const arr = ref([])

if (localStorage.shop) {
    arr.value = JSON.parse(localStorage.shop)

}

function del(time,val) {
    const bool=arr.value.findIndex((item)=>{
        return item.time==time
    })

    const flag=  arr.value[bool].img.indexOf(val)

    arr.value[bool].img.splice(flag,1)
    localStorage.shop=JSON.stringify(arr.value)
}
// console.log(arr.value);




function fn() {
    router.back()
}
// [{
//     time:xxxx,
//     img:[]
// },

// ]

</script>

<style lang="less" scoped>
.Myfoot {
    height: 100vh;
    display: flex;
    flex-direction: column;


    .foot {
        flex: 1;
        // background: red;
        // margin-top: 8vh;
        overflow-y: scroll;
        padding-bottom: 6vh;
        div {
            width: 90%;
            margin: auto;

            p {
                margin: 4vw 0 1vw 0;
                text-indent: 2.667vw;
                border-left: 0.933vw red solid;
            }

            ul {
                width: 100%;
                display: flex;
                flex-wrap: wrap;

                // justify-content: space-around;
                li {
                    width: 26.667vw;
                    height: 26.667vw;
                    margin-top: 2vw;
                    margin-bottom: 2vw;
                    position: relative;

                    img {
                        width: 100%;
                        height: 100%;
                    }

                    .icon {
                        position: absolute;
                        right: 1vw;
                        top: 1vw;
                        width: 6vw;
                        height: 6vw;
                        background: rgba(255, 0, 0, 0.44);
                        text-align: center;
                        line-height: 6vw;
                        border-radius: 50%;
                        color: white;
                    }
                }

            }
        }
    }
}




li:nth-child(3n+2) {
    margin-left: 5vw;
    margin-right: 5vw;
}
</style>